import React, { Component } from 'react';
import IconButton from 'material-ui/IconButton';
import { grey500 } from 'material-ui/styles/colors';
import { Card, CardActions, CardHeader, CardMedia, CardText } from 'material-ui/Card';

import { Link } from 'react-router';

import { moment } from '../Utils/Helper';

export default class TweetCard extends Component {

  /**
   * 删除当前分享
   * @var id 分享ID
   */
  del = (id, e) => {
    this.props.handleDelete(id, this.props.index);
    this.props.handleOpen();
  };

  render() {
    const { item } = this.props;

  	return (
      <div className="col-md-4 col-sm-6 col-xs-12 card-cell">
        <Card>
          <Link to={`user/${item.user_id}`}>
            <CardHeader
              title={item.user_name}
              subtitle={moment(item.created_at).format('ll ah:mm')}
              avatar={item.user_img}
            />
          </Link>
          
          <CardText style={styles.text}>
            <p>
              {item.detail}
            </p>
          </CardText>

          <CardMedia>
            <img src={item.share} />
          </CardMedia>

          {this.props.isCurrentUser ? 
            <CardActions style={styles.action}>
              <IconButton 
                iconClassName="icon-delete"
                iconStyle={{color: grey500}}
                tooltip="删除"
                tooltipPosition="top-right"
                onClick={this.del.bind(this, item.id)}
              />
            </CardActions> : ''
          }
        </Card>
      </div>
  	);
  }
};

const styles = {
  text: {
    paddingTop: 0
  },
  action: {
    display: 'flex',
    justifyContent: 'space-between'
  }
};

/**
 *<b>
    活动：<Link to={`activity/show/${item.source}`}>{item.title}</Link>的分享
  </b><br />
 */